<template>
  <view v-if="detailInfo">
    <mt-navbar title="投诉详情" bg-color="#1484EE" left-icon-color="#ffffff" :title-style="{ color: '#ffffff' }">
      <template #right>
        <view v-if="detailInfo.complaintStatus === 0" class="flex items-center">
          <image class="w-32rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-clue-status6.svg"></image>
          <text class="text-24rpx text-#ffffff ml-8rpx">处理中</text>
        </view>
        <view v-if="detailInfo.complaintStatus === 1" class="flex items-center">
          <image class="w-32rpx h-32rpx" src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-clue-status4.svg"></image>
          <text class="text-24rpx text-#ffffff ml-8rpx">处理完成</text>
        </view>
      </template>
    </mt-navbar>
    <view class="bg-#ffffff px-32rpx py-32rpx mb-16rpx">
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">投诉信息</text>
        </template>
      </mt-title>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">所属分类：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.productCategoryParentName }}</view>
      </view>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">线索名称：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.productName }}</view>
      </view>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.contactsName }}</view>
      </view>
      <view class="flex mt-24rpx line-height-28rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系电话：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.contactsPhone }}</view>
      </view>
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人职位：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.duty }}</view>
      </view> -->
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人地址：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.companyAddress }}</view>
      </view> -->
      <!-- <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">联系人公司：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.companyName }}</view>
      </view> -->
      <view class="flex mt-24rpx line-height-28rpx">
        <view class="w-190rpx text-28rpx text-#727687">创建时间：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.createTime }}</view>
      </view>
    </view>

    <view class="bg-#ffffff px-32rpx pt-32rpx mb-16rpx">
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">投诉内容</text>
        </template>
      </mt-title>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">投诉原因：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.complaintContent }}</view>
      </view>
      <view class="flex mt-24rpx file-list">
        <view class="w-190rpx text-28rpx text-#727687">上传证据：</view>
        <view class="flex-1 min-w-0">
          <view
            v-for="(son, sidx) in detailInfo.complaintEvidenceUrls"
            :key="sidx"
            class="file flex items-center py-24rpx"
            @click="previewDocument(son.url)"
          >
            <image class="w-32rpx h-32rpx" :src="fileExtension(son.url)"></image>
            <view class="w-420rpx break-all ml-16rpx text-28rpx text-#007BFF ellipsis">{{ son.name }}</view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="detailInfo.complaintStatus === 1" class="bg-#ffffff px-32rpx pt-32rpx mb-16rpx">
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">结果反馈</text>
        </template>
      </mt-title>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">投诉盟商：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.complaintServiceProviderName }}</view>
      </view>
      <view class="flex mt-24rpx">
        <view class="w-190rpx text-28rpx text-#727687">结果反馈：</view>
        <view class="flex-1 min-w-0 text-28rpx text-#1C213E break-all font-bold">{{ detailInfo.complaintResultContent }}</view>
      </view>
      <view class="flex mt-24rpx file-list">
        <view class="w-190rpx text-28rpx text-#727687">反馈文件：</view>
        <view class="flex-1 min-w-0">
          <view
            v-for="(son, sidx) in detailInfo.complaintResultFileUrls"
            :key="sidx"
            class="file flex items-center py-24rpx"
            @click="previewDocument(son.url)"
          >
            <image class="w-32rpx h-32rpx" :src="fileExtension(son.url)"></image>
            <view class="w-420rpx break-all ml-16rpx text-28rpx text-#007BFF ellipsis">{{ son.name }}</view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="detailInfo.complaintOperateList?.length" class="bg-#ffffff px-32rpx py-32rpx">
      <mt-title>
        <template #title>
          <text class="text-32rpx font-bold">投诉处理动态</text>
        </template>
      </mt-title>
      <view class="h-24rpx"></view>
      <clue-step :data="detailInfo.complaintOperateList">
        <template #title="{ row }">
          <view class="text-28rpx text-#1C213E font-bold break-all">
            <text>{{ row.complaintOperateTitle }}</text>
          </view>
        </template>
        <template #desc="{ row }">
          <view>
            <view class="text-28rpx text-#1C213E mt-32rpx break-all">{{ row.complaintOperateContent }}</view>
            <view class="text-24rpx text-#ADB0BD mt-32rpx break-all">{{ row.complaintOperateTime }}</view>
          </view>
        </template>
      </clue-step>
    </view>
  </view>
</template>

<script setup>
import { cluegetComplaintDetail } from '@/subClue/api/index';
import { previewDocument, getFileExt } from '@/utils/tools';
import clueStep from '@/subClue/components/clue-step.vue';
import dayjs from 'dayjs';

// 文件图标
const iconFile = {
  'pdf': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-pdf.svg',
  'mp4': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-mp4.svg',
  'doc': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-word.svg',
  'docx': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-word.svg',
  'xls': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-excel.svg',
  'xlsx': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-excel.svg',
  'png': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-png.svg',
  'jpg': 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-jpg.svg'
};

function fileExtension(url) {
  return iconFile[getFileExt(url)];
}

const detailInfo = ref(null);
function getDetail() {
  cluegetComplaintDetail({ complaintId: complaintId.value }).then((res) => {
    const obj = res.data;
    const p_name = JSON.parse(obj.productCategoryName);
    obj.productCategoryParentName = p_name[0];
    obj.productCategoryName = p_name[1];
    obj.complaintEvidenceUrls = obj.complaintEvidenceUrls ? JSON.parse(obj.complaintEvidenceUrls) : [];
    obj.complaintResultFileUrls = obj.complaintResultFileUrls ? JSON.parse(obj.complaintResultFileUrls) : [];

    detailInfo.value = obj;
  });
}

const complaintId = ref('');
onLoad((options) => {
  complaintId.value = options.id;
  getDetail();
  uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#1484EE'
  });
});
</script>

<style lang="scss" scoped>
.file-list {
  .file {
    border-bottom: 2rpx solid #e6e6e6;
    &:first-of-type {
      padding-top: 0;
    }
    &:last-of-type {
      border-bottom: none;
    }
  }
}
</style>
